<template>
    <div>
        <h2>物流相关信息</h2>
        <div class="logistics-info-header">
            <div class="logistics-info-header-left">
                <div :class="statusClass(orderInfo.logisticsStatus)">{{ status(orderInfo.logisticsStatus) }}</div>
                <div class="logistics-company">{{ orderInfo.logisticsCompany }}</div>
                <div class="logistics-no">{{ orderInfo.logisticsNo }}</div>
            </div>
        </div>
        <ul class="logistics-info-list">
            <li v-for="(item, index) in orderInfo.logisticsInfo" :key="index">
                <div class="logistics-info-list-time">{{ item.time }}</div>
                <div class="logistics-info-list-content">{{ item.content }}</div>
            </li>
        </ul>
        <button v-per="orderInfo.role">查看物流详情</button>
    </div>
</template>

<script>
export default {
    props: ['orderInfo'],
    data() {
        return {

        }
    },
    methods: {
        // 0 未发货 1 已发货 2 已签收 3 未签收
        status(status) {
            if (status === 0) {
                return '未发货'
            } else if (status === 1) {
                return '已发货'
            } else if (status === 2) {
                return '已签收'
            } else if (status === 3) {
                return '未签收'
            }
        },
        statusClass(status) {
            switch (status) {
                case 0:
                    return 'status-unshipped'; // 未发货
                case 1:
                    return 'status-shipped'; // 已发货
                case 2:
                    return 'status-signed'; // 已签收
                case 3:
                    return 'status-not-signed'; // 未签收
                default:
                    return 'status-unknown'; // 默认类
            }
        }
    },
    directives: {
        per: {
            update(el, binding) {
                const allowedRoles = ['admin', 'zhangsan', 'lisi'];
                if (allowedRoles.includes(binding.value)) {
                    el.style.display = 'block';
                } else {
                    el.style.display = 'none';
                }
            }
        }
    }
}
</script>